
import React from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import { Switch, MemoryRouter as Router, } from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history } from 'umi'
import './index.less'


export default (props: any) => {

  const routerType = {
    'POP': 'back',
    'PUSH': 'in',
    'REPLACE': 'in'

  }
  const setRouteActive = (value: string) => {
    history.push(value)
  }

  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/shop',
      title: '本地商家',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/mine',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  return (
    <Router initialEntries={['/home']}>
      <div className="app">
        {/* 头部 */}
        <div className="top">
          <NavBar>配合路由使用</NavBar>
        </div>

        {/* 中间 */}
        <div className="body">
          {/* 动画 */}
          <TransitionGroup style={{ height: '100%' }} className='transition_wrapper' childFactory={(child:any) => (
            React.cloneElement(child, { classNames: routerType[history.action] })
          )}>
            <CSSTransition key={props.location.pathname} appear timeout={3000}>
              <Switch location={props.location}>{props?.children}</Switch>
            </CSSTransition>
          </TransitionGroup>

        </div>

        {/* 底部tab */}
        <div className="bottom">
          <TabBar activeKey={props.location.pathname} onChange={value => setRouteActive(value)}>
            {tabs.map(item => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </div>
      </div>
    </Router>
  )
}

